import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ProductService } from '../product.service';
import { map } from 'rxjs';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css'],
})
export class ProductDetailComponent implements OnInit {
  private router = inject(Router);
  private activatedRoute = inject(ActivatedRoute);

  service = inject(ProductService);

  constructor() {
    console.log('ProductDetail constructed!');

    this.activatedRoute.paramMap
      .pipe(map((params) => Number(params.get('id'))))
      .subscribe(this.service.selectedProductId);

    // this.activatedRoute.params
    //   .pipe(map((params) => Number(params['id'])))
    //   .subscribe(this.service.selectedProductId);
  }

  ngOnInit(): void {
    console.log('ProductDetail ngOnInit!');
    // const state = this.router.routerState;
    // console.log(state);
    // console.log(state.root);
    // console.log(state.root.firstChild);
    // console.log(state.root.firstChild?.firstChild);
    // console.log(state.toString());
    // console.log(state.root.toString());
    // console.log(state.root.firstChild?.toString());
    // console.log(state.root.firstChild?.firstChild?.toString());
  }

  navToPreProduct() {
    this.router.navigate([
      'products',
      this.service.selectedProductId.value - 1,
    ]);
  }

  navToNextProduct() {
    this.router.navigate([
      'products',
      this.service.selectedProductId.value + 1,
    ]);
  }

  navToProductsPage() {
    this.router.navigate(['/products']);
  }
}
